<template>
  <!-- 底部导航栏 -->
  <div class="footer-nav">
    <van-tabbar v-model="activeNav" @change="onTabChange">
      <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item name="category" icon="apps-o" dot>分类</van-tabbar-item>
      <van-tabbar-item name="orderPage" icon="orders-o">订单</van-tabbar-item>
      <van-tabbar-item name="center" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref } from "vue";
import router from "@/router";
const activeNav = ref("");

const onTabChange = (name) => {
  console.log("切换到底部导航:", name);
  // 实际项目可添加：路由跳转逻辑（如使用 vue-router）
  // 示例：useRouter().push(`/${name}`)
  router.push({ name: `${name}` });
};
</script>

<style lang="scss" scoped>
.footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 750px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 999;
  /* 确保在最上层 */
}
</style>
